import React, { useEffect, useState } from "react";
import { Button, Radio, List } from "antd";
import styles from "./index.module.less";
import { getLabelColor } from "../api/index.ts";

const App: React.FC = (props) => {
  const [tag, setTag] = useState("entity");
  const [data, setData] = useState([]);
  const [leftList, setLeftList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  console.log(props);

  const handleTagChange = (e) => {
    setTag(e.target.value);
    if (e.target.value === "entity") {
      setData(leftList.entities);
    } else {
      const arr = [];
      leftList.relations.map((item) => {
        arr.push({
          label: item
        })
      })
      setData(arr);
    }
  };
  const fetchData = () => {
    getLabelColor().then((res) => {
      setLeftList(res.data);
      setData(res.data.entities);
      props.onColors(res.data.entities);
    })
  }
  useEffect(() => {
    fetchData();
  },[])

  return (
    <div className={styles.left_bar}>
      <div className={styles.top_bottom}>
        <Radio.Group value={tag} onChange={handleTagChange} buttonStyle="solid">
          <Radio.Button type="primary" value="entity">实体标签</Radio.Button>
          <Radio.Button value="relation">关系标签</Radio.Button>
        </Radio.Group>
      </div>
      <div className={styles.scroll_list}>
      {tag == "entity" && <List
        className={styles.demo_loadmore_list}
        loading={loading}
        itemLayout="horizontal"
        loadMore={hasMore}
        dataSource={data}
        renderItem={item => (
          <List.Item className={styles.list_item}>
            <span>{item.label}</span>
            <div className={styles.ball} style={{ background: "#" + item.color }}></div>
          </List.Item>
        )}
      />}
      {tag == "relation" && <List
        className={styles.demo_loadmore_list}
        loading={loading}
        itemLayout="horizontal"
        loadMore={hasMore}
        dataSource={data}
        renderItem={item => (
          <List.Item className={styles.list_item}>
            <span>{item.label}</span>
          </List.Item>
        )}
      />}
      </div>
    </div>
  );
};


export default App;
